.zrx-score {
    min-height: 32px;
    &[disabled] {
        pointer-events: none;
        .empty {
            .border,
            .background {
                background-color: $border-3;
            }
        }
        .half-fill {
            .border {
                background-color: $border-3;
            }
        }
    }
    span {
        display: inline-block;
        position: relative;
        margin-top: 4px;
        line-height: 0;
        vertical-align: top;
        &.text {
            height: 24px;
            line-height: 24px;
        }
        &:hover {
            cursor: pointer;
            opacity: 0.7;
        }
        &:not(:last-child) {
            margin-right: 6px;
        }
        &.fill {
            .border,
            .background {
                background-color: $primary;
            }
        }
        &.half-fill {
            .border {
                background-color: $primary;
            }
            .background {
                background-image: linear-gradient(
                    90deg,
                    $primary 0%,
                    $primary var(--percent),
                    transparent var(--percent),
                    transparent 100%
                );
            }
        }
        &.empty {
            .border {
                background-color: $--text-dim;
            }
        }
        .icon {
            width: 24px;
            height: 24px;
        }
        .background {
            position: absolute;
            mask-image: url("../assets/svg-icon/star_full.svg");
            z-index: 1;
        }
        .border {
            mask-image: url("../assets/svg-icon/star_empty.svg");
        }
    }
}
